<template>
  <div class="container" v-loading="loading" element-loading-text="努力加载中...">
    <div class="inner-container">
      <div class="header">
        <div class="title">诊断记录</div>
      </div>
      <div class="section">
        <el-text class="section-title">患者经整夜呼吸睡眠发现:</el-text>
      </div>
      <template v-for="(section, index) in sections" :key="index">
        <div class="section-header">
          <el-text class="section-title">{{ section.title }}</el-text>
          <el-button v-if="section.enableEdit" class="edit-button" @click="dynamicEdit(index)">
            <font-awesome-icon :icon="['fas','fa-pencil-alt']" class="edit-icon"></font-awesome-icon>
            <el-text v-if="!section.editMode"  class="edit-text">编辑</el-text>
            <el-text v-if="section.editMode"  class="edit-text">保存</el-text>


          </el-button>
        </div>
        <div class="section-content">
          <div v-if="section.editMode" class="section-content-input">
            <el-input  type="textarea" class="input-area"  :rows="4" v-model="diagnosisData[section.field]"></el-input>
          </div>
          <el-text v-else class="text-content">{{ diagnosisData[section.field] }}</el-text>
        </div>
      </template>

      <el-row v-if="!enableEdit"  justify  class="footer">
        <el-col :span="18"></el-col>
        <el-col :span="6">医生: {{ diagnosisDoctor }}</el-col>
        <el-col :span="18"></el-col>
        <el-col :span="6">日期: {{ diagnosisTime }}</el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import ReferenceType from "@/components/ReferenceType.vue";
import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
import '@/assets/css/reportCard.css';
import {computed, onMounted, onUnmounted, reactive, ref, watch} from "vue";
import * as echarts from "echarts";
import sleepData from "@/api/sleepData.js";
import doctor from "@/api/doctor";
import report from "@/api/report.js";
onMounted(() => {
  getDiagnosisData(props.currentReportId);
});
onUnmounted(()=>{
  console.log("onumounted")
  updateEvaluation()
});
const props = defineProps({
  currentReportId: Number,
  enableEdit:Boolean
});
//随时更新最新的数据
watch(() => props.currentReportId, (newId) => {
  getDiagnosisData(newId);
});
watch(() => props.enableEdit, (newValue) => {
  console.log("watch")
  enableEdit.value = newValue
});
console.log("111111111111")
console.log(props.enableEdit)

const enableEdit = ref(false)
enableEdit.value = props.enableEdit

const loading = ref(false)
const evaluationBackup = ref('')
const getDiagnosisData = (reportId)=>{
  loading.value = false
  sleepData.getDiagnosisData(reportId).then((res)=>{
    if (res.data.code === 200 && res.data.data !== null){
      // if (res.data.data.stateStatistics === undefined ){
      //   diagnosisData.value.stateStatistics = ""
      // }
      // if (diagnosisData.value.breatheStatistics === undefined ){
      //   diagnosisData.value.breatheStatistics = ""
      // }
      // if (diagnosisData.value.diagnosis === undefined ){
      //   diagnosisData.value.diagnosis = ""
      // }
      // if (diagnosisData.value.doctorId === undefined){
      //   diagnosisData.value.doctorId = "-1";
      // }
      // if (diagnosisData.value.diagnosisTimestamp === undefined){
      //   diagnosisData.value.diagnosisTimestamp = 0;
      // }
      diagnosisData.value = res.data.data
      console.log(diagnosisData.value)
      evaluationBackup.value = diagnosisData.value.diagnosis
    }else{
      diagnosisData.value.id = "1"
      diagnosisData.value.reportId = ""
      diagnosisData.value.stateStatistics = ""
      diagnosisData.value.breatheStatistics = ""
      diagnosisData.value.diagnosis = ""
      diagnosisData.value.doctorId = "-1"
      diagnosisData.value.diagnosisTimestamp = 0
    }
  }).catch((err)=>{
    console.log(err)
  }).finally(() => {
    loading.value = false; // 使用箭头函数包装
  });
}
const diagnosisData=ref({
  id: "1",
  reportId: "",
  stateStatistics: "",
  breatheStatistics: "",
  diagnosis: "",
  doctorId: "-1",
  diagnosisTimestamp: 0
})

//计算得到医生名字
const diagnosisDoctor = ref("");
watch(() => diagnosisData.value.doctorId, (newDoctorId) => {
  console.log("New Doctor ID:", newDoctorId);
  if (newDoctorId !== "" && newDoctorId !== undefined && newDoctorId !== '-1') {
    doctor.getDoctorName(newDoctorId).then((res) => {
      if (res.data.code === 200) {
        diagnosisDoctor.value = res.data.data;
      }
    }).catch((err) => {
      console.log(err);
    });
  } else {
    diagnosisDoctor.value = "";
  }
}, { immediate: true });



// const diagnosisDoctor = computed(()=>{
//   if (diagnosisData.value.doctorId !== "" && diagnosisData.value.doctorId !== undefined) {
//     doctor.getDoctorName(diagnosisData.value.doctorId).then((res) => {
//       if (res.data.code === 200) {
//         return res.data.data
//       }
//     }).catch((err) => {
//       console.log(err);
//     });
//   } else {
//     return ""
//   }
// })
// 计算 diagnosisTime
const diagnosisTime = computed(() => {
  const timestamp = diagnosisData.value.diagnosisTimestamp;
  if (!timestamp || timestamp === 0) return '';
  const date = new Date(timestamp);
  return date.toLocaleString(); // 返回本地化的日期和时间字符串
});
const dynamicEdit = (index)=>{
  sections.value[index].editMode = !sections.value[index].editMode
  if (sections.value[index].editMode === false){
    updateEvaluation()
  }
}
const sections = ref([
  {
    title: '睡眠分期:',
    field: 'stateStatistics',
    enableEdit: false,
    editMode: false,
  },
  {
    title: '呼吸及相关事件:',
    field: 'breatheStatistics',
    enableEdit: false,
    editMode: false,
  },
  {
    title: '综上，建议:',
    field: 'diagnosis',
    enableEdit: props.enableEdit,
    editMode: false,
  },
]);
const updateEvaluation = ()=>{

  if (false){ //diagnosisData.value.diagnosis === evaluationBackup.value
    console.log("更新诊断记录kkkkk")
  }else {
    console.log("更新诊断记录")

    const updateDiagnosisDto = {
      reportId: props.currentReportId,
      evaluation: diagnosisData.value.diagnosis
    }
    report.updateDiagnosis(updateDiagnosisDto).then((res)=>{
      if (res.data.code === 200){

      }
    }).catch((err)=>{
      console.log(err)
    })
  }
}
</script>
<style scoped>
.container {
  width: 90%;
  height: 100%;
  background-color: #eff2f9;
  border-radius: 20px;
}

.inner-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  width: 100%;
  height: 5%;
  margin-top: 2%;
}

.title {
  width: 20%;
  font-size: 18px;
  height: 100%;
  margin-left: 20px;
  align-items: center;
  display: flex;
}

.section {
  width: 100%;
}

.section-title {
  font-size: 16px;
  margin-left: 5%;
  font-weight: bold;
}

.section-header {
  width: 100%;
  display: flex;
  margin-top: 20px;
}

.edit-button {
  margin-left: auto;
  background-color: #eff2f9;
  border: none;
}

.edit-icon {
  color: #3dd986;
  margin-left: 10px;
  margin-right: 10px;
  width: 20px;
  height: 20px;
}

.edit-text {
  font-size: 17px;
  color: #3dd986;
}

.section-content {
  width: 100%;
  display: flex;
  align-items: center;
}
.section-content-input{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.input-area {
  height: 100%;
  width: 95%;
}

.text-content {
  font-size: 16px;
  margin-left: 5%;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-bottom: 5vh;
}

</style>